<template>
	<el-main class="u-bg-while" style="height: 100%;">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="门店地图" name="1">
				<div class="map-search_wrapper" id="bmapSearch">
					<div id="container" style="overflow:hidden;"></div>
					<div class="u-flex jxx-search u-p-30">
						<Store v-model="searchData.store" placeholder="选择/搜索门店" class="u-m-r-10" clearable
							@clear="upsearch"></Store>
						<!-- <el-input v-model="searchData.keyword" placeholder="门店搜索" ></el-input> -->
						<!-- <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button> -->
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="设备/通道" name="2">
				<div class="">
					<el-row :gutter="15">
						<el-col :lg="8" :sx="6">
							<el-card shadow="never" class="" style="height:300px;">
								<Unit v-model="camData.unit" placeholder="请选择单位"></Unit>
								<Store v-if="camData.unit.id" v-model="camData.store" :unit="unit" placeholder="请选择门店"
									class="u-m-l-15"></Store>
							</el-card>
						</el-col>
						<el-col :lg="8" :sx="6">
							<el-card shadow="never" class="u-text-center" style="height:300px;">
								<scEcharts width="200px" height="200px" style="margin: 0 auto;" :option="option1">
								</scEcharts>
								<div class="u-font-16 u-text-center">
									<span>设备状态</span>
									<span>{{this.camInfo.online}}/{{this.camInfo.offline + this.camInfo.online}}</span>
								</div>
							</el-card>
						</el-col>
						<el-col :lg="8" :sx="6">
							<el-card shadow="never" style="height:300px;">
								<scEcharts width="200px" height="200px" style="margin: 0 auto;" :option="option2">
								</scEcharts>
								<div class="u-font-16 u-text-center">
									<span>通道状态</span>
									<span>{{this.channelInfo.online}}/{{this.channelInfo.offline+this.channelInfo.online}}</span>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="进店量统计" name="3">
				<div v-if="activeName == 3">
					<el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
						<el-radio-button :label="item.value" v-for="(item,index) in tabStatList"
							:key="index">{{item.label}}</el-radio-button>
					</el-radio-group>
					<el-row :gutter="15">
						<el-col :lg="4">
							<el-card shadow="never">
								<sc-statistic title="进店人次" value="7419" suffix="次" groupSeparator></sc-statistic>
							</el-card>
						</el-col>
						<el-col :lg="4">
							<el-card shadow="never">
								<sc-statistic title="进店人数" value="1290" suffix="人" groupSeparator></sc-statistic>
							</el-card>
						</el-col>
						<el-col :lg="4">
							<el-card shadow="never">
								<sc-statistic title="店外客流" value="6879" suffix="次" groupSeparator></sc-statistic>
							</el-card>
						</el-col>
						<el-col :lg="4">
							<el-card shadow="never">
								<sc-statistic title="进店率" value="37.58" suffix="%" groupSeparator></sc-statistic>
							</el-card>
						</el-col>
						<el-col :lg="4">
							<el-card shadow="never">
								<sc-statistic title="环比统计" value="17.58" suffix="%" groupSeparator></sc-statistic>
							</el-card>
						</el-col>
						<el-col :lg="4">
							<el-card shadow="never">
								<sc-statistic title="环比统计" value="17.58" suffix="%" groupSeparator></sc-statistic>
							</el-card>
						</el-col>
					</el-row>
					<div style="width:100%">
						<el-row :gutter="15">
							<el-col :lg="18">
								<el-card shadow="never">
									<div class="u-font-20 u-p-b-20">客流趋势</div>
									<div style="width:100%">
										<scEcharts width="100%" height="256px" :option="option"></scEcharts>
									</div>
								</el-card>
							</el-col>
							<el-col :lg="6">
								<el-card shadow="never">
									<div class="u-font-20 u-p-b-20">门店客流排名</div>
									<div class="jxx-randing">
										<ul>
											<li v-for="(item,index) in 10" :key="index">
												<div class="jxx-title">
													<i class="u-m-r-10">{{Number(index+1)}}</i>
													<span>椰乡店</span>
												</div>
												<div class="jxx-num">1668</div>
											</li>
										</ul>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="门店销售额统计" name="4">Task</el-tab-pane>
		</el-tabs>
	</el-main>

</template>
<script>
	import scEcharts from '@/components/scEcharts'
	import scStatistic from '@/components/scStatistic'
	import {
		asyncJS
	} from '@/utils/async.js';
	export default {
		components: {
			scEcharts,
			scStatistic
		},
		data() {
			return {
				searchData: {
					store: ''
				},
				camInfo: {},
				channelInfo: {},
				camData: {
					store: {},
					unit: {},
					mode: 'D', //D W M
					startDate: '',
					page: 1,
					pagesize: 200
				},
				activeName: '1',
				itemList: [{
						lng: 110.836743,
						lat: 19.803782
					},
					{
						lng: 110.236743,
						lat: 19.303782
					}
				],
				tabPosition: 1,
				tabStatList: [{
						label: '今日',
						value: 1
					},
					{
						label: '昨日',
						value: 2
					},
					{
						label: '上周',
						value: 3
					},
					{
						label: '上月',
						value: 4
					}
				],
				option: {
					title: {
						text: '',
						subtext: '',
					},

					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'bar',
							barWidth: '15px',
						},
						{
							data: [110, 180, 120, 120, 60, 90, 110],
							type: 'bar',
							barWidth: '15px',
						}
					]
				},
				option1: {
					title: {
						text: '',
						subtext: '',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: '数量',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [
							// {
							// 	value: 45,
							// 	name: '在线设备'
							// },
							// {
							// 	value: 2,
							// 	name: '离线设备'
							// }
						]
					}]
				},
				option2: {
					title: {
						text: '',
						subtext: '',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: '数量',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 145,
								name: '在线设备'
							},
							{
								value: 12,
								name: '离线设备'
							}
						]
					}]
				},
				map: null,
				mapMark: null,
				centerArr: [110.17, 19.20], //中心点
			}
		},
		watch: {
			'searchData.store'(val) {
				// 清除所有标记
				this.map.clearMap()
				this.itemList = [val]
				this.ready()
			},
			'camData.store'() {
				this.getCamData()
			},
			'camData.unit'() {
				this.unit = this.camData.unit.id
			}

		},
		created() {
			// 地图安全密钥
			window._AMapSecurityConfig = {
				securityJsCode: this.$CONFIG.AMAP_CODE,
			}
			this.getStroeList()

		},
		mounted() {

			window.onLoadMap = () => {
				this.ready()
				// this.search()


			}
			// key 值需要去高德地图去申请才可以
			asyncJS('https://webapi.amap.com/maps?v=1.4.15&key=' + this.$CONFIG.AMAP_KEY + '&callback=onLoadMap')
			this.getCamData()
		},

		beforeUnmount() {},
		props: ['bmapSearMsg'],
		methods: {
			// 加载设备数据
			async getCamData() {
				let data = {
					unit: this.camData.unit.id,
					store: this.camData.store.id,
					mode: this.camData.mode,
					page: this.camData.page,
					pagesize: this.camData.pagesize,
				}
				const res = await this.$API.api.cam.stat.post(data)
				this.camInfo = res.data[0]
				this.channelInfo = res.data[1]

				this.option1.series[0].data = [{
						value: this.camInfo.online,
						name: '在线设备'
					},
					{
						value: this.camInfo.offline,
						name: '离线设备'
					}
				]
				this.option2.series[0].data = [{
						value: this.channelInfo.online,
						name: '在线通道'
					},
					{
						value: this.channelInfo.offline,
						name: '离线通道'
					}
				]
			},
			//搜索
			async upsearch() {
				await this.getStroeList()
				this.ready()
			},
			// 加载门店列表
			async getStroeList() {
				const res = await this.$API.enterprise.store.map.post(this.searchData)
				this.itemList = res.data

			},
			closeBmap() {
				this.$emit('closeBmap');
			},
			comfirmBmap() {
				this.$emit('comfirmBmap', this.longAndLat);
			},
			ready() {
				this.map = new window.AMap.Map('container', {
					resizeEnable: true,
					center: this.centerArr,
					zoom: 8
				})
				// 批量标注
				this.itemList.forEach(item => {
					if (item.longitude) {
						this.addMarker(item.longitude, item.latitude)
					}
				})
			},
			// 清除 marker
			clearMarker() {
				if (this.mapMark) {
					this.mapMark.setMap(null)
					this.mapMark = null
				}
			},
			// 实例化点标记
			addMarker(lng, lat) {
				// 先清除原来的标记
				// this.clearMarker();
				// 清除所有标记
				//this.map.clearMap();
				let _this = this
				this.mapMark = new window.AMap.Marker({
					position: [lng, lat],
					map: _this.map
				});
				this.mapMark.setMap(this.map)
			}
		}
	};
</script>
<style lang="scss" scoped>
	.map-search_wrapper {
		position: relative;

		.jxx-search {
			position: absolute;
			top: 0px;
			left: 0px;
		}

		#container {
			width: 100%;
			height: 66vh;
			background-color: #FFFFFF;
		}
	}

	.jxx-randing li {
		display: flex;
		justify-content: space-between;
		padding: 5px 0;

		.jxx-title {
			display: flex;
			justify-content: space-between;
		}

		i {
			width: 15px;
			height: 15px;
			border-radius: 100%;
			background-color: #f99;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-style: normal;
		}
	}
</style>
